<template>
  <div v-if="visible" class="drawer-overlay" @click.self="handleClose">
    <div class="drawer-container">
      <div class="drawer-header">
        <h2>{{ title }}</h2>
        <span class="close-icon" @click="handleClose">×</span>
      </div>
      
      <div class="drawer-content">
        <div class="info-section">
          <h3>学生信息</h3>
          <div class="info-grid">
            <div>学生姓名</div>
            <div>学号</div>
            <div>辅导员姓名</div>
            <div>{{ detail.nickName }}</div>
            <div>{{ detail.userName }}</div>
            <div>{{ detail.leaderName }}</div>
          </div>
        </div>
        
        <div class="info-section">
          <h3>所属组织</h3>
          <div class="organization">{{ detail.deptNameList.join(' / ') }}</div>
        </div>
        
        <div class="info-section">
          <h3>活动信息</h3>
          <div class="activity-grid">
            <div>活动名称</div>
            <div>报名开始时间</div>
            <div>报名截止时间</div>
             <div>{{ detail.activity.title }}</div>
            <div>{{ detail.activity.signupStart }}</div>
            <div>{{ detail.activity.signupEnd }}</div>
            
            <div>活动时间</div>
            <div>活动地点</div>
            <div>活动范围</div>
            <div>{{ detail.activity.createTime }}</div>
            <div>{{ detail.activity.address }}</div>
            <div>{{ detail.activity.signupStart }}</div>
            
            <div>得分标准</div>
            <div>活动状态</div>
            <div>活动类型</div>
            <div>{{ activityInfo.scoreStandard }}</div>
            <div>{{ activityInfo.status }}</div>
            <div>{{ detail.activity.activityCategoryName }}</div>
          </div>
        </div>
        
        <div class="info-section">
          <h3>活动内容</h3>
          <div class="activity-content">{{ detail.activity.scoreConfig }}</div>
        </div>
        
        <div class="info-section">
          <h3>积分变更记录</h3>
          <ul class="score-records">
            <li v-for="(record, index) in detail.scoreDetailRecordList" :key="index">
              <span class="record-time">{{ record.createTime }}</span>
              <span :class="['record-creditValue', record.creditValue > 0 ? 'positive' : 'negative']">
                {{ record.creditValue > 0 ? '+' : '' }}{{ record.creditValue }}
              </span>
              <span class="record-reason">{{ record.remark}}</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="drawer-footer">
        <button class="close-btn" @click="handleClose">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits,ref,onMounted } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '得分详情'
  },
  detail: {
    type: Object,
    default:null
  },
  studentInfo: {
    type: Object,
    default: () => ({
      name: '张张张',
      id: '0615250101',
      counselor: '最多四字'
    })
  },
  organization: {
    type: String,
    default: '电子信息工程学院/计算机应用技术/计应Z501'
  },
  activityInfo: {
    type: Object,
    default: () => ({
      name: '梁小静：亚洲女飞人得奔跑...',
      signupTime: '2024-08-23 18:12',
      deadline: '2024-08-30 18:12',
      time: '2024-08-30 19:12',
      location: '多功能5号会议室',
      scope: '计算机系',
      scoreStandard: '自定义',
      status: '已结束',
      type: '素养课程学习'
    })
  },
  activityContent: {
    type: String,
    default: '汇聚各种精彩表演、游戏和美食，为市民带来一场丰富多彩的夏日盛宴。活动伊始，将由一支活力四溢的舞蹈队带来开场表演，随后是各种趣味游戏和挑战'
  },
  scoreRecords: {
    type: Array,
    default: () => [
      { time: '2024-09-07 18:21', score: 5, reason: '错误判断' },
      { time: '2024-09-07 18:21', score: -5, reason: '发现未遵守学生基本职业素养规范，因此对该...' },
      { time: '2024-09-07 18:21', score: 20, reason: '活动教师赋分' }
    ]
  }
});

const emit = defineEmits(['update:visible']);

const handleClose = () => {
  emit('update:visible', false);
};

onMounted(()=>{
    
})
</script>

<style scoped>
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

.drawer-container {
  width: 800px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.drawer-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.drawer-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.info-section {
  margin-bottom: 20px;
}

.info-section h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.info-grid > div {
  padding: 5px;
  font-size: 14px;
}

.info-grid > div:nth-child(-n+3) {
  font-weight: bold;
}

.organization {
  padding: 5px;
  font-size: 14px;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.activity-grid > div {
  padding: 5px;
  font-size: 14px;
}

.activity-grid > div:nth-child(1) {
  font-weight: bold;
}
.activity-grid > div:nth-child(2) {
  font-weight: bold;
}
.activity-grid > div:nth-child(3) {
  font-weight: bold;
}
.activity-grid > div:nth-child(7) {
  font-weight: bold;
}
.activity-grid > div:nth-child(8) {
  font-weight: bold;
}
.activity-grid > div:nth-child(9) {
  font-weight: bold;
}
.activity-grid > div:nth-child(13) {
  font-weight: bold;
}
.activity-grid > div:nth-child(14) {
  font-weight: bold;
}
.activity-grid > div:nth-child(15) {
  font-weight: bold;
}

.activity-content {
  padding: 5px;
  font-size: 14px;
  line-height: 1.5;
}

.score-records {
  list-style: none;
  padding: 0;
  margin: 0;
}

.score-records li {
  display: flex;
  align-items: center;
  padding: 8px 5px;
  border-bottom: 1px dashed #eee;
}

.record-time {
  width: 150px;
  font-size: 14px;
  color: #666;
}

.record-score {
  width: 50px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.record-creditValue.positive {
  color: #67c23a;
}

.record-creditValue.negative {
  color: #f56c6c;
}

.record-reason {
  flex: 1;
  font-size: 14px;
  margin-left: 10px;
}

.drawer-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

.close-btn {
  padding: 8px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.close-btn:hover {
  background-color: #66b1ff;
}
.drawer-header {
  position: relative;
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.close-icon {
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0 10px;
  line-height: 1;
}

.close-icon:hover {
  color: #333;
}

</style>